<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成达大屏监控系统 - 现代版</title>
    <link rel="stylesheet" href="css/modern-style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 背景动画层 -->
    <div class="bg-animation">
        <div class="bg-circle circle-1"></div>
        <div class="bg-circle circle-2"></div>
        <div class="bg-circle circle-3"></div>
        <div class="bg-circle circle-4"></div>
    </div>

    <!-- 主容器 -->
    <div class="modern-dashboard">
        <!-- 顶部导航栏 -->
        <header class="modern-header">
            <div class="header-content">
                <div class="logo-section">
                    <div class="logo-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="logo-text">
                        <h1>成达大屏监控系统</h1>
                        <p>Modern Dashboard</p>
                    </div>
                </div>
                <div class="time-section">
                    <div class="current-time">
                        <i class="far fa-clock"></i>
                        <span id="current-date"></span>
                        <span id="current-time"></span>
                    </div>
                    <div class="status-indicator">
                        <div class="status-dot online"></div>
                        <span>系统运行中</span>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 左侧面板 -->
            <aside class="left-panel">
                <div class="panel-card">
                    <div class="card-header">
                        <h3><i class="fas fa-cogs"></i> 系统状态</h3>
                    </div>
                    <div class="status-grid">
                        <div class="status-item">
                            <div class="status-icon machine">
                                <i class="fas fa-industry"></i>
                            </div>
                            <div class="status-info">
                                <span class="status-label">机台总数</span>
                                <span class="status-value" id="total-machines">-</span>
                            </div>
                        </div>
                        <div class="status-item">
                            <div class="status-icon warning">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="status-info">
                                <span class="status-label">今日总产量</span>
                                <span class="status-value" id="warning-machines">-</span>
                            </div>
                        </div>
                        <div class="status-item">
                            <div class="status-icon critical">
                                <i class="fas fa-chart-bar"></i>
                            </div>
                            <div class="status-info">
                                <span class="status-label">昨日总产量</span>
                                <span class="status-value" id="critical-machines">-</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel-card">
                    <div class="card-header">
                        <h3><i class="fas fa-chart-pie"></i> 实时统计</h3>
                    </div>
                    <div class="chart-container">
                        <div class="mini-chart">
                            <div class="chart-circle">
                                <svg viewBox="0 0 120 120">
                                    <circle cx="60" cy="60" r="50" fill="none" stroke="#e0e7ff" stroke-width="8"/>
                                    <circle cx="60" cy="60" r="50" fill="none" stroke="#6366f1" stroke-width="8" 
                                            stroke-dasharray="314" stroke-dashoffset="78" stroke-linecap="round"/>
                                </svg>
                                <div class="chart-text">
                                    <span class="chart-percentage">75%</span>
                                    <span class="chart-label">运行率</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- 中央内容区域 -->
            <section class="center-content">
                <!-- 机台信息表格 -->
                <div class="content-card">
                    <div class="card-header">
                        <div class="header-left">
                            <h3><i class="fas fa-table"></i> 机台信息</h3>
                            <span class="badge" id="machine-count">0</span>
                        </div>
                        <div class="header-right">
                            <button class="refresh-btn" onclick="refreshData()">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>
                    <div class="table-wrapper">
                        <div class="loading-overlay" id="machine-loading">
                            <div class="loading-spinner"></div>
                            <span>加载中...</span>
                        </div>
                        <table class="modern-table" id="machine-table">
                            <thead>
                                <tr>
                                    <th><i class="fas fa-hashtag"></i> 机台号</th>
                                    <th><i class="fas fa-cog"></i> 经轴号</th>
                                    <th><i class="fas fa-box"></i> 原料名称</th>
                                    <th><i class="fas fa-clock"></i> 剩余时间</th>
                                    <th><i class="fas fa-exchange-alt"></i> 换轴时间</th>
                                    <th><i class="fas fa-forward"></i> 下一组盘头</th>
                                </tr>
                            </thead>
                            <tbody id="machine-table-body">
                                <!-- 数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 自定义机台信息表格 -->
                <div class="content-card">
                    <div class="card-header">
                        <div class="header-left">
                            <h3><i class="fas fa-star"></i> 自定义机台信息</h3>
                            <span class="badge" id="custom-machine-count">0</span>
                        </div>
                        <div class="header-right">
                            <div class="auto-refresh">
                                <i class="fas fa-clock"></i>
                                <span>自动刷新: 30s</span>
                            </div>
                        </div>
                    </div>
                    <div class="table-wrapper">
                        <div class="loading-overlay" id="custom-machine-loading">
                            <div class="loading-spinner"></div>
                            <span>加载中...</span>
                        </div>
                        <table class="modern-table" id="custom-machine-table">
                            <thead>
                                <tr>
                                    <th><i class="fas fa-hashtag"></i> 机台号</th>
                                    <th><i class="fas fa-cog"></i> 经轴号</th>
                                    <th><i class="fas fa-box"></i> 原料名称</th>
                                    <th><i class="fas fa-clock"></i> 剩余时间</th>
                                    <th><i class="fas fa-exchange-alt"></i> 换轴时间</th>
                                    <th><i class="fas fa-forward"></i> 下一组盘头</th>
                                </tr>
                            </thead>
                            <tbody id="custom-machine-table-body">
                                <!-- 数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

        </main>

        <!-- 底部状态栏 -->
        <footer class="modern-footer">
            <div class="footer-content">
                <div class="footer-left">
                    <span><i class="fas fa-server"></i> 系统版本: v2.0</span>
                    <span><i class="fas fa-database"></i> 数据库连接正常</span>
                </div>
                <div class="footer-right">
                    <span>最后更新: <span id="last-update">-</span></span>
                    <span>© 2025 成达科技</span>
                </div>
            </div>
        </footer>
    </div>

    <!-- 通知容器 -->
    <div class="notification-container" id="notification-container"></div>

    <!-- JavaScript -->
    <script src="js/modern-dashboard.js"></script>
</body>
</html>
